import { updateMyUserUsingPost } from '@/services/zengjin/userController';
import { useModel } from '@@/exports';
import { Button, Card, Form, Input, message, Select, Space, Spin } from 'antd';
import { createStyles } from 'antd-style';
import React, { useState } from 'react';
const { Option } = Select;
const formItemLayout = {
  labelCol: { span: 6 },
  wrapperCol: { span: 14 },
};

createStyles(({ token }) => {
  return {
    action: {
      marginLeft: '8px',
      color: 'rgba(0, 0, 0, 0.2)',
      fontSize: '24px',
      verticalAlign: 'middle',
      cursor: 'pointer',
      transition: 'color 0.3s',
      '&:hover': {
        color: token.colorPrimaryActive,
      },
    },
    lang: {
      width: 42,
      height: 42,
      lineHeight: '42px',
      position: 'fixed',
      right: 16,
      borderRadius: token.borderRadius,
      ':hover': {
        backgroundColor: token.colorBgTextHover,
      },
    },
    container: {
      display: 'flex',
      flexDirection: 'column',
      height: '100vh',
      overflow: 'auto',
      backgroundImage:
        "url('https://mdn.alipayobjects.com/yuyan_qk0oxh/afts/img/V-_oS6r-i7wAAAAAAAAAAAAAFl94AQBr')",
      backgroundSize: '100% 100%',
    },
  };
});
const PersonalSetting: React.FC = () => {
  /**
   * 获取当前用户的信息
   */
  const { initialState } = useModel('@@initialState');
  const { currentUser } = initialState || {};

  /**
   *
   */
  const [submitting, setSubminting] = useState<boolean>(false);
  const onFinish = async (values: any) => {
    const params = {
      ...values,
      userName: values.userName,
      userAvatar: values.userAvatar,
    };
    //提交的时候将上次的，清空。
    setSubminting(true);
    console.log(params);

    try {
      const res = await updateMyUserUsingPost(params, {});
      if (res.code == 0) {
        message.success('设置成功!  ' + res.message);
      } else {
        message.error('设置失败！' + res.message);
      }
    } catch (e: any) {
      message.error('设置异常' + e.message);
    }
    setSubminting(false);
  };
  return (
    <div>
      <Card title="个人设置">
        <Spin spinning={submitting} />
        <Form
          name="validate_other"
          {...formItemLayout}
          onFinish={onFinish}
          initialValues={{
            userName: currentUser ? currentUser.userName : '',
          }}
          style={{ maxWidth: 600 }}
        >
          <Form.Item name="userName" label="昵称">
            <Input />
          </Form.Item>
          <Form.Item name="userAvatar" label="头像">
            <Input placeholder="目前只支持Url格式修改，抱歉！" />
          </Form.Item>

          <Form.Item wrapperCol={{ span: 12, offset: 6 }}>
            <Space>
              <Button type="primary" htmlType="submit">
                提交
              </Button>
              <Button htmlType="reset">重置</Button>
            </Space>
          </Form.Item>
        </Form>
      </Card>
    </div>
  );
};
export default PersonalSetting;
